<template>
  <div style="padding: 10px;">
    <a-page-header style="border-bottom: 1px solid rgb(235, 237, 240); background-color: #fff;" title="生长记录"
      @back="goBack">
      <template v-if="currentCycle" #extra>
        <a-range-picker v-model:value="dateRange" show-time />
        <a-button type="primary" @click="searchDate()">搜索</a-button>
      </template>
      <a-breadcrumb>
        <a-breadcrumb-item><a @click="getPlan">全部</a></a-breadcrumb-item>
        <a-breadcrumb-item v-if="currentPlan"><a @click="loadData(currentPlan)">{{ currentPlan.name
            }}</a></a-breadcrumb-item>
        <a-breadcrumb-item v-if="currentCycle"><a @click="loadData(currentCycle)">{{ currentCycle.name
            }}</a></a-breadcrumb-item>
      </a-breadcrumb>
    </a-page-header>

    <div class="list flex"
      style="flex-wrap: wrap; border-bottom: 1px solid rgb(235, 237, 240); background-color: #fff;">
      <div class="item" v-for="(item, index) in dataList" :key="index" style="margin: 5px;">
        <!-- <img v-if="item.type == 'record'" :width="200" :src="item.icon" @click="handlePreview(index)" /> -->
        <a-image v-if="item.type == 'record'" :width="320" :height="180" :src="item.icon" :placeholder="true"
          :preview="{ visible: false }" @click="handlePreview(index)"></a-image>
        <img v-else :src="item.icon" @click="loadData(item)" />
        <p>{{ item.name }}</p>
        <p v-if="item.type == 'plan'">{{ item.planId }}</p>
        <p v-if="item.type == 'record'">{{ item.date }}</p>
      </div>
    </div>
    <a-pagination v-if="currentCycle" style="background-color: #fff; text-align: right; padding: 10px;"
      v-model:current="recordsParams.pageNo" :total="totalNum" :pageSize="recordsParams.pageSize" hideOnSinglePage
      show-less-items :show-total="total => `总数 ${total} 张`" @change="loadData(currentCycle)" />
  </div>
</template>

<script lang="ts" name="TGrowthRecord-tGrowthRecord" setup>
import { ref, reactive } from 'vue';
// import {list as productList} from '../../basic-information/product/TProduct.api';
import { list as planList } from '../TGrowPlanList/TGrowPlan.api';
import { list as growthcycle } from '../../basic-information/product/components/ProductGrowthcycle.api';
import { list } from './TGrowthRecord.api';
// import { downloadFile } from '/@/utils/common/renderUtils';
import folder from '/@/assets/images/folder.png';
import { createImgPreview } from '/@/components/Preview/index';
import dayjs from 'dayjs';
import { Pagination, Image } from 'ant-design-vue';
const APagination = Pagination;
const AImage = Image;

const dateRange = ref();

const dataList = ref([])
const totalNum = ref(0);
const currentPlan = ref();
const currentCycle = ref();
const recordsParams = reactive({
  growPlanId: '',
  growthcycleId: '',
  date_begin: '',
  date_end: '',
  pageNo: 1,
  pageSize: 10
})

const getPlan = () => {
  currentCycle.value = null
  currentPlan.value = null;
  totalNum.value = 0;
  recordsParams.pageNo = 1;
  dateRange.value = null;
  recordsParams.date_begin = '';
  recordsParams.date_end = '';
  planList({}).then(res => {
    dataList.value = res.records.map((item: any) => {
      return {
        type: 'plan',
        planId: item.planId,
        productNo: item.productNo,
        icon: folder,
        name: item.product.name
      }
    })
  })
}

getPlan();

const goBack = () => {
  if (currentCycle.value) {
    loadData(currentPlan.value)
  } else if (currentPlan.value) {
    getPlan();
  } else {
    return null;
  }
}

const loadData = (item: { type: any; planId: string; productNo: any; growthcycleId: string; }) => {
  switch (item.type) {
    case 'plan':
      currentPlan.value = item;
      recordsParams.growPlanId = item.planId
      loadProductGrowthcycle(item.productNo)
      break;
    case 'cycle':
      currentCycle.value = item;
      recordsParams.growthcycleId = item.growthcycleId
      loadRecords()
      break;
    default:
      break;
  }
}

const loadProductGrowthcycle = (no) => {
  currentCycle.value = null
  totalNum.value = 0;
  recordsParams.pageNo = 1;
  dateRange.value = null;
  recordsParams.date_begin = '';
  recordsParams.date_end = '';
  growthcycle({ productNo: no }).then(res => {
    dataList.value = res.records.map((item: any) => {
      return {
        type: 'cycle',
        growthcycleId: item.growthcycleId,
        productNo: item.productNo,
        icon: folder,
        name: item.growthcycleName
      }
    })
  })
}

const searchDate = () => {
  if (dateRange.value) {
    recordsParams.date_begin = dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
    recordsParams.date_end = dayjs(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
  } else {
    recordsParams.date_begin = '';
    recordsParams.date_end = '';
  }
  loadRecords();
}

const loadRecords = () => {
  dataList.value = []
  list(recordsParams).then(res => {
    totalNum.value = res.total;
    dataList.value = res.records.map((item: any) => {
      return {
        type: 'record',
        no: item.no,
        date: item.date,
        icon: item.pictures,
        name: item.photographer
      }
    })
  })
}

const handlePreview = (index: any) => {
  createImgPreview({ imageList: dataList.value.map(item => item.icon), index: index });
}
</script>

<style scoped>
.item {
  width: 320px;
  text-align: center;
  cursor: pointer;
}

.item p {
  margin-top: 1em;
}
</style>
